<template>
	<view style="min-height: 100vh;background: #F3F3F3;">
		<view style="padding-top: 24upx;">
			<view class="Release_top">
				<view class="inputBox">
					{{id?'申请原因':'反馈内容'}}
				</view>
				<view class="textareaBox">
					<textarea placeholder="请详细描述您的问题~" v-model="textareaValue" :auto-height="true" maxlength="-1" />
				</view>
				<view class="ImageBox">
					<view class="ImageList">
						<view class="ImageItem" v-if="ImageList.length>0&&item" v-for="(item,index) in ImageList"
							@click="previewImage(index)">
							<image :src="getImage(item)" mode=""></image>
							<view class="colseIcon" @click.stop="deleteImage(index)">
								<u-icon name="close" color="#fff" size="15"></u-icon>
							</view>
						</view>
						<view class="uploadBox" @click="uploadImg" v-if="ImageList.length < 9">
							<u-icon name="camera" size="50" color="#666"></u-icon>
							<view class="cameratitle">上传照片</view>
						</view>
					</view>
				</view>
			</view>
			<view class="userMsg" v-if="!id">
				<view class="userItem">
					<view>手机号：</view>
					<input type="number" placeholder="请输入联系电话" v-model="mobile" />
				</view>
				<view class="userItem">
					<view>订单号：</view>
					<input type="text" placeholder="选填" v-model="order_id" />
				</view>
			</view>
			<view class="submit" @click="submit">提交</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				ImageList:[],
				textareaValue:"",
				reqFlag:true,
				mobile:"",
				order_id:"",
				id:"",
				type:""
			}
		},
		onLoad(options) {
      // #ifdef APP-PLUS
      var args = plus.runtime.arguments;
      if(args){
        app.$vm.setShareDetail(args);
      }
      // #endif
			if(options.id){
				this.id = options.id;
				this.type = options.type;
				if(options.type=='user'){
					uni.setNavigationBarTitle({
						title:"申诉"
					})
				}else{
					uni.setNavigationBarTitle({
						title:"申请售后"
					})
				}
			}else{
				uni.setNavigationBarTitle({
					title:"投诉与建议"
				})
			}
		},
		methods: {
			deleteImage(index) {
				// console.log(index);
				this.ImageList.splice(index, 1);
			},
			submit(){
				if(!this.reqFlag){
					return false;
				}
				this.reqFlag = false;
				let obj = {};
				obj.data = {};
				if(this.id){
					obj.data.content = this.textareaValue;
					obj.images = this.ImageList;
					obj.id = this.id;
					if(this.type=='user'){
						this.$u.api.shopEvaluationOrderUserAppeal(obj).then(res=>{
							console.log(res)
							this.$refs.uToast.show({
								title:"申请成功",
								type:"success",
								duration:2000
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},2000)
						})
						.catch(err=>{
							this.reqFlag = true;
						})
					}else{
						this.$u.api.shopEvaluationOrderAppeal(obj).then(res=>{
							console.log(res)
							this.$refs.uToast.show({
								title:"申请成功",
								type:"success",
								duration:2000
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},2000)
						})
						.catch(err=>{
							this.reqFlag = true;
						})
					}
				}else{
					obj.data.content = this.textareaValue;
					obj.images = this.ImageList;
					obj.data.mobile = this.mobile;
					obj.data.order_number = this.order_id;
					this.$u.api.feedbackAdd(obj).then(res=>{
						console.log(res)
						this.$refs.uToast.show({
							title:"反馈成功",
							type:"success",
							duration:2000
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},2000)
					})
					.catch(err=>{
						this.reqFlag = true;
					})
				}
			},
			getImage(url) {
				// console.log(app.$vm.globalData.imgBaseUrl + url)
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			uploadImg(){
				let self = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function(result) {
						console.log(result);
						// self.ImageList = self.ImageList.concat(res.tempFilePaths);
						uni.showLoading({
							title: "上传图片中..."
						})
						let j = result.tempFilePaths.length;
						let arr = JSON.parse(JSON.stringify(self.ImageList))
						let p = arr.length;
						for (let i = 0; i < result.tempFilePaths.length; i++) {
							self.ImageList.push("");
						}
						for (let i = 0; i < result.tempFilePaths.length; i++) {
							app.$vm.updataAvator(result.tempFilePaths[i]).then(rep => {
								j--;
								self.ImageList.splice((p + i), 1, rep)
								if (j == 0) {
									uni.hideLoading();
								}
								console.log(self.ImageList)
								self.$forceUpdate()
							});
						}
					},
					fail:err=>{
						if(err.errMsg!='chooseImage:fail cancel'){
							app.$vm.checkAuth("scope.camera").then(resultConfirm=>{
								if(resultConfirm){
									uni.showModal({
										title:"系统繁忙，请稍后再试"
									})
								}else{
									uni.showModal({
										title:"请检查摄像头和相册权限后重试"
									})
								}
							})
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.submit{
		width: 638upx;
		height: 88upx;
		border-radius: 44upx;
		background: #FFAC3F;
		line-height: 88upx;
		text-align: center;
		color: white;
		margin: 120upx auto 0;
		font-size: 28upx;
	}
	
	
	.userMsg{
		width: 100%;
		margin-top: 24upx;
		background: white;
		box-sizing: border-box;
		padding: 0 32upx;
	}
	.userItem{
		width: 100%;
		height: 100upx;
		border-bottom: 2upx solid #EFEFEF;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.userItem:last-child{
		border-bottom: none;
	}
	.userItem>view{
		width: 160upx;
		height: 100upx;
		line-height: 100upx;
		font-size: 28upx;
		color: #333333;
	}
	.userItem>input{
		width: calc(100% - 160upx);
		height: 100upx;
		font-size: 28upx;
	}
	
	
	
	.Release_top {
		width: 750upx;
		padding: 32upx 24upx 0 24upx;
		background-color: #fff;
		// margin-top: 16upx;
	
		.inputBox {
			width: 100%;
			font-size: 28upx;
			color: #333333;
		}
	
		.textareaBox {
			padding: 24upx 0;
			width: 100%;
			// height: 400upx;
			overflow: auto;
	
			textarea {
				width: 100%;
				height: 100%;
				font-size: 26upx;
				line-height: 45upx;
				color: #333333;
				font-weight: 400;
			}
		}
	
		.ImageBox {
			margin-top: 30upx;
			padding-bottom: 32upx;
			.ImageList {
				display: flex;
				flex-wrap: wrap;
	
				.ImageItem {
					position: relative;
					width: 144upx;
					height: 144upx;
					border-radius: 8upx;
					// background-color: #F0AD4E;
					margin-right: 16upx;
					margin-bottom: 16upx;
	
					// overflow: hidden;
					.colseIcon {
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						top: -10upx;
						right: -10upx;
						width: 40upx;
						height: 40upx;
						border-radius: 50%;
						background-color: #4b4b4b;
					}
	
					.videoIcon {
						position: absolute;
						top: 40%;
						left: 50%;
						transform: translate(-50%);
					}
	
					video {
						width: 100%;
						height: 100%;
						border-radius: 8upx;
					}
	
					image {
						width: 100%;
						height: 100%;
						border-radius: 8upx;
					}
				}
	
				.uploadBox {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 144upx;
					height: 144upx;
					background: #F5F5F5;
					border: 2upx solid #E5E5E5;
					opacity: 1;
					border-radius: 8upx;
	
					.cameratitle {
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666;
						margin-top: 8upx;
					}
				}
			}
		}
	
		.topicBox {
			width: calc(750upx - 48upx);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24upx 0;
			box-sizing: border-box;
	
			.topicIcon {
				display: flex;
				align-items: center;
	
				.IconBox {
					font-size: 30upx;
					color: #999999;
				}
	
				.topicName {
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					margin-left: 8upx;
				}
	
				.ellipsis {
					width: calc(750upx - 150upx);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>
